<!DOCTYPE html>
<html lang="zh-CN" id="index">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="../../favicon.ico" mce_href="../../favicon.ico" type="image/x-icon">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Redis系统数据监控</title>

    <link rel="stylesheet" href="../../misc/css/common.min.css">
    <link rel="stylesheet" href="css/app.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style media="screen"></style>
</head>

<body class="app-container">
    <div id="app" class="page-container">
        <div class="layout">
            <Layout>
                <Header theme="dark">
                    <div class="layout-nav">
                        <!-- <i-menu mode="horizontal" theme="dark" @on-select="menuSelect">
                            <menu-item name="1">
                                <Icon type="ios-construct"></Icon><span>设置</span>
                            </menu-item>
                        </i-menu> -->
                        <i-menu mode="horizontal" theme="dark" active-name="7" @on-select="menuSelect">
                            <Submenu name="2">
                                <template slot="title">
                                    <Icon type="ios-desktop"></Icon><span>设备</span>
                                </template>
                                <!-- <menu-item name="4">全部</menu-item> -->
                                <menu-item v-for="item in serves" :key="item.id" :name="item.id">
                                  <Icon type="md-arrow-dropright"></Icon><span>{{ item.text }}</span>
                                </menu-item>
                                <menu-item name="1">
                                  <Icon type="ios-construct"></Icon><span>设置</span>
                                </menu-item>
                            </Submenu>
                        </i-menu>

                        <i-menu mode="horizontal" theme="dark" active-name="9" @on-select="dbDo" v-if="dbs.length > 0">
                            <Submenu name="3">
                                <template slot="title">
                                    <Icon type="ios-apps"></Icon><span>DB</span>
                                </template>
                                <!-- <menu-item name="9">全部</menu-item> -->
                                <menu-item v-for="item in dbs" :key="item" :name="item">
                                    <Icon type="md-arrow-dropright"></Icon><span>{{ item }}</span>
                                </menu-item>
                                <menu-item name="10">
                                    <Icon type="md-add"></Icon><span>新增DB</span>
                                </menu-item>
                                <menu-item name="11">
                                    <Icon type="md-close"></Icon><span>删除DB</span>
                                </menu-item>
                            </Submenu>
                        </i-menu>
                    </div>
                </Header>

                <Content>
                    <div class="info">
                        <div class="left_info fl">
                            <span v-if="sel_server">当前服务器:</span>
                            <span>{{ sel_server }}</span>
                            <span v-if="sel_db">> DB:</span>
                            <span>{{ sel_db }}</span>
                            <span v-if="countKeys">(共计{{ countKeys }}个)</span>
                            <span v-if="sel_key">> key:</span>
                            <span>{{ sel_key }}</span>
                        </div>
                    </div>
                    <div class="result_container" style="">
                        <div class="result_area">
                            <div class="left_area fl" :style="{height: css.r_lf_ht}">
                                <div class="fixed-header">
                                    <!-- <Icon type="ios-refresh-circle"></Icon> -->
                                    <i-button type="primary" :disabled="!sel_db" @click="dbDo(db)" shape="circle" icon="ios-refresh-circle"></i-button>
                                    <i-input clearable v-if="sel_db" v-model="queryKey" placeholder="" style="width: auto;margin-left:10px;"></i-input>
                                    <i-button v-if="sel_db" :disabled="!sel_db" type="primary" @click="initKeys();doQueryKey();" class="btn-query">搜索</i-button>
                                    <div class="left-header-btns-right">
                                        <i-button type="primary" @click="addNewKeyModel=true;addNewType='Strings'" :disabled="!sel_db" size="small">添加</i-button>
                                        <i-button type="primary" @click="onUpload" :disabled="!sel_db" size="small">导入</i-button>
                                        <i-button type="primary" @click="onDownload" :disabled="!sel_db" size="small">导出</i-button>
                                    </div>
                                </div>
                                <List footer="这已经是底部了" border>
                                    <template slot="header">
                                        <!-- <Icon type="ios-refresh-circle"></Icon> -->
                                    </template>
                                    <list-item v-for="item in keys" :key="item" :class="{'selected': item == key}">
                                        <div @click="getKeyDetail(item)" class="menuDiv">
                                            {{ item }}
                                        </div>
                                    </list-item>
                                </List>
                            </div>
                            <div class="right_area fr" :style="{height: css.r_rt_ht}">
                                <div class="result-type"><span v-if="resultTypeShow">类型:</span> {{ resultTypeShow }}</div>
                                <i-button class="btn-update" type="primary" :disabled="!sel_key || unModify" icon="ios-construct" @click="updateKey">修改</i-button>
                                <i-button class="btn-delete" type="error" :disabled="!sel_key" icon="md-close-circle" @click="onDeleteKey()">删除</i-button>
                                <i-input v-model="result" type="textarea" placeholder=""></i-input>
                            </div>
                        </div>
                    </div>
                    <Spin size="large" fix  v-if="isLoadingShow"></Spin>
                </Content>

                <!-- footer begin -->
                <Footer class="text-muted">
                    <div class="footer" style="cursor:pointer" @click="goGit">
                        <div class="footer-content">
                            <ul>
                                <li>
                                    <span class="fslogo"><h2>Redis</h2><h6>系统数据监控</h6></span>
                                </li>
                                <li>
                                    <span><Icon type="md-bicycle"></Icon></span>
                                    <span>BB只为更好</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </Footer>
                <!-- /footer end -->
            </Layout>
        </div>

        <!--设置模态框 -->
        <Modal v-model="configModel" title="设置" width="800" class-name="vertical-center-modal">
            <div class="setting_content">
                <i-button style="margin-bottom:10px;" type="primary" icon="md-add-circle" @click="onAddConfig">新增</i-button>
                <i-table height="480" stripe border :columns="configs.columns" :data="configs.data">
                    <template slot-scope="{ row, index }" slot="id">
                      <i-input type="text" v-model="configs.editConfig.editId" v-if="configs.editConfig.editIndex === index"></i-input>
                      <span v-else>{{ row.id }}</span>
                    </template>

                    <template slot-scope="{ row, index }" slot="name">
                      <i-input type="text" v-model="configs.editConfig.editName" v-if="configs.editConfig.editIndex === index"></i-input>
                      <span v-else>{{ row.name }}</span>
                    </template>

                    <template slot-scope="{ row, index }" slot="server">
                      <i-input type="text" v-model="configs.editConfig.editServer" v-if="configs.editConfig.editIndex === index"></i-input>
                      <span v-else>{{ row.server }}</span>
                    </template>

                    <template slot-scope="{ row, index }" slot="port">
                      <i-input type="text" v-model="configs.editConfig.editPort" v-if="configs.editConfig.editIndex === index"></i-input>
                      <span v-else>{{ row.port }}</span>
                    </template>

                    <template slot-scope="{ row, index }" slot="password">
                      <i-input type="text" v-model="configs.editConfig.editPasswd" v-if="configs.editConfig.editIndex === index"></i-input>
                      <span v-else>{{ row.password }}</span>
                    </template>

                    <template slot-scope="{ row, index }" slot="action">
                      <div v-if="configs.editConfig.editIndex === index">
                        <i-button type="success" size="small" icon="md-checkmark-circle" style="margin-right: 5px" @click="onSaveEditConfig(index)">保存</i-button>
                        <i-button type="error" size="small" icon="md-arrow-round-back" @click="configs.editConfig.editIndex = -1">取消</i-button>
                      </div>
                      <div v-else>
                        <i-button type="primary" size="small" icon="ios-construct" style="margin-right: 5px" @click="onEditConfig(row, index)">编辑</i-button>
                        <i-button type="error" size="small" icon="md-close-circle" @click="onDeleteConfig(row, index)">删除</i-button>
                      </div>
                    </template>
                </i-table>
            </div>
        </Modal>

        <!--设置 添加 模态框 -->
        <Modal v-model="addserverModel" title="添加Redis服务器" @on-ok="onSaveConfig" width="800" class-name="vertical-center-modal">
            <div class="addserver_content" align="center">
                <i-form ref="addConfigForm" :model="configs.addConfigForm.configsForm" :rules="configs.addConfigForm.ruleValidate" label-position="right" :label-width="0" style="width:450px;">
                    <form-item prop="editId">
                        <i-input class="input-add" v-model="configs.addConfigForm.configsForm.editId"><span slot="prepend">标&nbsp;&nbsp;&nbsp;识</span></i-input>
                    </form-item>
                    <form-item prop="editName">
                        <i-input class="input-add" v-model="configs.addConfigForm.configsForm.editName"><span slot="prepend">名&nbsp;&nbsp;&nbsp;称</span></i-input>
                    </form-item>
                    <form-item prop="editServer">
                        <i-input class="input-add" v-model="configs.addConfigForm.configsForm.editServer"><span slot="prepend">服务器</span></i-input>
                    </form-item>
                    <form-item prop="editPort">
                        <i-input class="input-add" v-model="configs.addConfigForm.configsForm.editPort"><span slot="prepend">端&nbsp;&nbsp;&nbsp;口</span></i-input>
                    </form-item>
                    <form-item prop="editPasswd">
                        <i-input class="input-add" v-model="configs.addConfigForm.configsForm.editPasswd"><span slot="prepend">密&nbsp;&nbsp;&nbsp;码</span></i-input>
                    </form-item>
                </i-form>
            </div>

            <div slot="footer">
                <i-button @click="onCancelAddConfig">取消</i-button>
                <i-button @click="onSaveConfig" type="info">确定</i-button>
            </div>
        </Modal>

        <!--删除 DB 模态框 -->
        <Modal v-model="deleteDbModel" title="删除DB" @on-ok="onConfirmDeleteDb" width="800" class-name="vertical-center-modal">
            <div class="deleteDbModel_content" align="center">
                <radio-group v-model="deleteOne" type="button">
                    <Radio v-for="item in dbs" :key="item" :label="item"></Radio>
                </radio-group>
            </div>
        </Modal>

        <!-- 删除服务器配置确认模态框 -->
        <Modal title="删除确认" v-model="isConfirmAction" @on-ok="onConfirmDeleteConfig" class-name="vertical-center-modal">
            <p> {{  actionInfo }} </p>
        </Modal>

        <!-- 删除DB确认模态框 -->
        <Modal title="删除DB确认" v-model="isConfActionDb" @on-ok="deleteDb" class-name="vertical-center-modal">
            <p> {{  actionInfo }} </p>
        </Modal>

        <!-- 新增键值对模态框 -->
        <Modal v-model="addNewKeyModel" title="添加键值对" @on-ok="onAddNewKey" @on-cancel="onCancelAddKey" width="800" class-name="vertical-center-modal">
            <div class="addNewKey_content" align="center">
                <radio-group v-model="addNewType" type="button" @on-change="changeKeyType">
                    <Radio label="Strings"></Radio>
                    <Radio label="Sets"></Radio>
                    <Radio label="Lists"></Radio>
                    <Radio label="Sorted Sets"></Radio>
                    <Radio label="Hashes"></Radio>
                </radio-group>
                <i-input class="input-add" disabled v-model="addNewType"><span slot="prepend">键类型</span></i-input>
                <i-input class="input-add" v-model="addNewKey"><span slot="prepend">键</span></i-input>
                <i-input class="input-add" type="textarea" :autosize="true" v-model="addNewValue"></i-input>
                <div style="color:#0f71d8;" v-html="valueSample">
                </div>
            </div>
        </Modal>

        <!-- 上传DB键值对数据 模态框 -->
        <Modal v-model="uploadDbModel" title="上传DB键值数据" @on-ok="onUploadDbData" width="800" class-name="vertical-center-modal">
            <div class="uploadDb_content" align="center">
              <Upload
                  ref="upload"
                  type="drag"
                  name="upload_file"
                  accept="application/vnd.ms-excel,application/msexcel,.xls"
                  :action="apiUrl + '?action=uploadfile'"
                  :before-upload="beforeUpload"
                  :on-success="uploadFileFinish">
                  <div style="padding: 20px 0">
                      <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                      <p>点击或拖拉文件到这里以上传文件</p>
                  </div>
              </Upload>
            </div>
        </Modal>
    </div>

    <script type="text/javascript" src="../../misc/js/common/bower.min.js"></script>
    <script src="js/main.js"></script>

    <script type="text/javascript">
    </script>
</body>

</html>
